<template>
	<div class="common-layout">
    <headers></headers>
		<el-container class="allback">
			<el-aside width="300px" class="el-aside-custom">
        <p v-if="user===''">@用户123 </p>
		<p v-else>@用户{{ this.user }} </p>
        <p>的主页</p>
      </el-aside>
			<el-main>
        <br/><br/><br/>
				<div class="container">
					<div
						v-for="work in works"
						:key="work.workId"
						class="work-item"
					>
						<button
							@click="toDetail(work.workId)"
							class="work-button"
						>
							<img
								:src="work.coverLink"
								alt="Cover Image"
								class="work-image"
							/>
							<p class="work-name">{{ work.workName }}</p>
						</button>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import axios from "axios";
import router from "../router";
import headers from "../components/Headers.vue";

export default {
	name: "HomePage",
	data() {
		return {
			works: [],
			user:''
		};
	},
	created() {
		const queryString = window.location.search;
		const params = new URLSearchParams(queryString);
		const authorId = params.get("authorId");
		this.fetchImages(authorId);
		this.getName(authorId);
	},
	methods: {
		async getName (authorId) {
			try {
				const response = await axios.get(
					"http://121.41.171.56:2003/work/getAuthorName/" + authorId
				);
				console.log(response.data.data);
				this.user = response.data.data;
			} catch (error) {
				console.error("Error get username:", error);
			}
		},
		async fetchImages(authorId) {
			try {
				const response = await axios.get(
					"http://121.41.171.56:2003/work/getWorksByAuthorId/" + authorId
				);
				this.works = response.data.data;
			} catch (error) {
				console.error("Error fetching images:", error);
			}
		},
		toDetail(hid) {
			router.push({ name: "publics", query: { hid } }, "_blank");
		},
	},
};
</script>

<style scoped>
.allback{
	background-color: rgba(60, 60, 60, 1);
}
.container {
	display: flex; /* 使用 flex 布局 */
	flex-direction: column; /* 列排列 */
	align-items: center; /* 水平居中 */
	background-color: rgba(60, 60, 60, 1);
}

.work-item {
	position: relative; /* 相对定位的容器 */
	text-align: center; /* 文字居中 */
	margin-bottom: 20px; /* 图片间距 */
}

.work-image {
	width: 897px;
	height: 504px;
	border-radius: 40px;
	object-fit: cover;
}

.work-name {
	position: absolute; /* 绝对定位 */
	color: white;
	top: 19px; /* 顶端对齐 */
	left: 38px; /* 左对齐 */
	font-size: 24px;
	margin: 0 20px 20px 20px; /* 调整边距 */
}

.background {
	color: rgba(60, 60, 60, 1);
}

.work-button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.el-aside-custom {
  color:white;
  font-size: 36px;
  padding-left: 82px;
  padding-top: 82px;
}
</style>
